<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-12-19 14:41:48
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-12-20 10:40:34
 * @FilePath: \cxl-driving-training\src\views\finance\bill\Index.vue
-->
<template>
    <div class="page-box">
        <!--  -->
        <div class="bill-total">
            <div class="bill-item" v-for="item in data.billTotal" :key="item.label">
                <h1>{{ item.label }}</h1>
                <p><i>￥</i>{{ item.value }}</p>
            </div>
        </div>

        <TemplateVue
            :page="data.pageData"
            @search="data.onSearch"
            @reset="data.onReset"
            @paginationChange="data.onPaginationChange"
            @paginationSize="data.onPaginationSize"
            @operation="data.onOperation"
        >
        </TemplateVue>
    </div>
</template>
<script setup lang="ts">
import TemplateVue from '@/components/template/Index.vue'
import BillData from '.'
import { reactive, ref } from 'vue'

const data = reactive(new BillData())
</script>

<style scoped lang="scss">
.bill-total {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    .bill-item {
        width: calc(25% - 16px);
        min-height: 100px;
        background-color: #ccc;
        box-sizing: border-box;
        padding: 16px;
        h1 {
            font-size: 18px;
        }
        p {
            font-size: 32px;
            i {
                font-size: 14px;
            }
        }
    }
}
</style>
